<template>
  <!-- 自动控制 -->
  <div class="zhu">
    <div class="box-card" v-if="as">
      <div class="tbs">
        <el-table
          :fit="true"
          style="width: 98%"
          :header-cell-style="{
            'text-align': 'left',
            color: '#000',
            'border-color': '#ccffff',
            background: '#CCFFFF',
          }"
          :height="tableHeight"
          :cell-style="{
            width: '100%',
            'text-align': 'left',
            'border-color': '#fff',
          }"
          border
          :data="filteredData"
          class="noe"
          @row-click="tz"
        >
          <el-table-column prop="name">
            <template slot="header">
              <span style="margin-right: 0.5vw">自动化名称</span>
              <!-- 点击搜索框1 -->
              <el-popover placement="bottom" trigger="click">
                <SceneNameinput @filtergeneralname="filtergeneralnameTable" />
                <i slot="reference" class="el-icon-caret-bottom"></i>
              </el-popover>
            </template>
          </el-table-column>

          <el-table-column align="left" label="操作" width="240">
            <template slot-scope="scope">
              <div class="bgyou">
                <el-button @click="redact(scope.row)" type="text">
                  编辑
                </el-button>
                <el-button
                  @click="duplication(scope.row)"
                  @change="duplication"
                  @click.native.stop="duplication"
                  type="text"
                  >复制</el-button
                >
                <el-button
                  @change="del"
                  @click.native.stop="del"
                  type="text"
                  @click="del(scope.row.automation_id)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="active" label="是否生效" width="80">
            <template slot-scope="scope">
              <el-switch
                @change="changeActive"
                @click.native.stop="changeActive(scope.row)"
                v-model="scope.row.active"
                :active-value="1"
                :inactive-value="0"
                active-color="blue"
                inactive-color="#CCCCCC"
              >
              </el-switch>
            </template>
          </el-table-column>
        </el-table>
        <el-button
          style="position: fixed; right: 3%; bottom: 2%"
          type="primary"
          @click="addSelect()"
          >创 建</el-button
        >
      </div>
    </div>

    <div class="box-card" v-else v-show="!dialogVisible && !dialogVisible1">
      <div class="hzding">
        <el-row type="flex" justify="start">
          <el-col :span="4">
            <span v-if="Nameshow" style="width: 20%; font-size: 20px"
              >{{ currentSelect.name }}
              <i @click="Nameshow = !Nameshow" class="el-icon-edit"></i>
            </span>
            <span v-if="!Nameshow" style="font-size: 20px">
              <input
                style="
                  width: 150px;
                  font-size: 20px;
                  outline: none;
                  border: none;
                  margin-top: -2px
                  padding-right: 0px !important;
                "
                v-model="currentSelect.name"
              />
              <i @click="datename()" class="el-icon-check"></i>
            </span>
          </el-col>
          <el-col :span="8"></el-col>
          <el-col :span="10"> </el-col>

          <el-col :span="2">
            <div @click="fh" style="text-align: right">
              <i class="el-icon-back"></i>
              返回
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="tiaojian">
        <el-row
          type="flex"
          style="
            justify-content: space-between;
            margin-top: 5px;
            margin-bottom: 10px;
            margin-right: 11px;
          "
        >
          <el-col>
            <span style="font-size: 18px; font-weight: 700" @click="xztj(sj)"
              >触发条件</span
            >
            <span style="color: #959ca5; margin-left: 20px"
              >触发条件最多添至5组设备</span
            >
          </el-col>
          <el-col style="text-align: right">
            <span style="font-weight: 700; margin-right: 20px"
              >条件判断逻辑</span
            >
            <el-select
              v-model="currentSelect.condition"
              @change="changeIsCondition"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <!-- @click="chooseCondition(currentSelect.condtions)"  -->
            <el-button
              type="primary"
              :disabled="!buttonshow"
              @click="sbcondition"
              style="margin-left: 20px"
              >选择条件</el-button
            >
          </el-col>
        </el-row>

        <el-table
          max-height="270"
          :header-cell-style="{
            'text-align': 'left',
            color: '#000',
            'border-color': '#ccffff',
            background: '#CCFFFF',
          }"
          :cell-style="{ 'text-align': 'left', 'border-color': '#fff' }"
          border
          :show-header="false"
          :data="currentSelect.conditions"
          @selection-change="handleSelectionChange"
          class="noe"
        >
          <el-table-column width="130"
            ><template scope="scope">
              <div>
                <i class="el-icon-location-outline"></i>
                <span style="font-weight: 700">{{ scope.row.area.name }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="name">
            <!-- <template scope="scope">
              {{ scope.$index + 1 }}
            </template> -->
          </el-table-column>

          <el-table-column width="1000">
            <template scope="scope">
              <div>
                <el-select
                  v-model="scope.row.state_type"
                  placeholder="触发属性"
                >
                  <el-option
                    v-for="item in conditionOptions.triggersOptionsList[
                      scope.$index
                    ]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.value == -1"
                  >
                  </el-option>
                </el-select>
                <span style="margin-left: 15px">
                  <el-select v-model="scope.row.character" placeholder="判定符">
                    <el-option
                      v-for="item in conditionOptions.characterOptionsList[
                        scope.$index
                      ]"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      :disabled="item.value == -1"
                    >
                    </el-option>
                  </el-select>
                </span>
                <span style="margin-left: 15px">
                  <el-select v-model="scope.row.alarm" placeholder="触发条件">
                    <el-option
                      v-for="item in conditionOptions.conditionsOptionsList[
                        scope.$index
                      ]"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      :disabled="item.value == -1"
                    >
                    </el-option>
                  </el-select>
                </span>
                <span style="margin-left: 15px">
                  <el-select
                    v-model="scope.row.main_condition"
                    placeholder="主条件"
                  >
                    <el-option
                      v-for="item in mainConditionOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </span>
                <span style="margin-left: 15px">
                  <i class="el-icon-delete" style="font-size: 1.5vw"></i>
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="dongzuo">
        <el-row type="flex">
          <el-col :span="8" style="display: flex">
            <span
              style="
                text-align: left;
                margin-top: 0.5vw;
                font-size: 18px;
                font-weight: 700;
              "
              >执行动作</span
            >
            <span style="margin: 0.5vw 0 0 1vw; color: #959ca5"
              >执行动作最多添至9组设备</span
            >
          </el-col>

          <el-col :span="16"></el-col>
          <el-col :span="3">
            <el-button
              :disabled="!buttonshow"
              style="position: absolute; top: 5px; right: 11px"
              type="primary"
              @click="SelectiveAction()"
              >选择动作</el-button
            >
            <el-button
              :disabled="!buttonshow"
              style="position: absolute; top: 485px; right: 11px"
              type="primary"
              @click="editPopeSubmitPopupData"
              >保存设备</el-button
            >
          </el-col>
        </el-row>
      </div>

      <div class="tb">
        <el-table
          max-height="400"
          :header-cell-style="{
            color: '#000',
            'border-color': '#ccffff',
            background: '#CCFFFF',
          }"
          :cell-style="{ 'border-color': '#fff' }"
          border
          :data="currentSelect.actions"
          @selection-change="handleSelectionChange"
          class="noe"
        >
          <el-table-column label="序号" width="120">
            <template scope="scope">
              <span v-if="scope.$index + 1 < 10">00{{ scope.$index + 1 }}</span>
              <span v-if="scope.$index + 1 > 9 && scope.$index + 1 < 100"
                >0{{ scope.$index + 1 }}</span
              >
              <span v-if="scope.$index + 1 > 99">{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="area.name">
            <template slot="header">
              <span style="margin-right: 0.5vw">所在空间 </span>
              <!-- 点击搜索框4 -->
              <el-popover placement="bottom" trigger="click">
                <LocationSpaceinput />
                <i slot="reference" class="el-icon-caret-bottom"></i>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="name">
            <template slot="header">
              <span style="margin-right: 0.5vw">名称</span>
              <!-- 点击搜索框3 -->
              <el-popover placement="bottom" trigger="click">
                <FacilityNameinput />
                <i slot="reference" class="el-icon-caret-bottom"></i>
              </el-popover>
            </template>
          </el-table-column>

          <el-table-column prop="dev_type_name">
            <template slot="header">
              <span style="margin-right: 0.5vw">设备类型</span>
              <!-- 点击搜索框2 -->
              <el-popover placement="bottom" trigger="click">
                <FacilityTypeinput />
                <i slot="reference" class="el-icon-caret-bottom"></i>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="参数配置" width="600">
            <template slot-scope="scope">
              <div class="bgyou" v-if="scope.row.properties">
                <!-- 模式 -->
                <span
                  v-if="
                    scope.row.properties.find((el) => el.cmd_name == 'air_mode')
                  "
                >
                  模式:
                  <el-select style="width: 80px" v-model="scope.row.air_mode">
                    <el-option label="制冷" :value="1">制冷</el-option>
                    <el-option label="制热" :value="2">制热</el-option>
                    <el-option label="除湿" :value="3">除湿</el-option>
                    <el-option label="送风" :value="4">送风</el-option>
                  </el-select>
                  &nbsp;&nbsp;&nbsp;
                </span>
                <!-- 风速 -->
                <span
                  v-if="
                    scope.row.properties.find(
                      (el) => el.cmd_name == 'wind_speed'
                    )
                  "
                >
                  风速:
                  <el-select
                    style="width: 70px"
                    v-model="scope.row.wind_speed"
                    placeholder="请选择"
                  >
                    <el-option label="低" :value="1">低</el-option>
                    <el-option label="中" :value="2">中</el-option>
                    <el-option label="高" :value="3">高</el-option> </el-select
                  >&nbsp;&nbsp;&nbsp;
                </span>

                <!-- 亮度 -->
                <span
                  v-if="
                    scope.row.properties.find(
                      (el) => el.cmd_name == 'brightness'
                    )
                  "
                  >亮度:
                  <i class="el-icon-arrow-left" @click="delld(scope.row)"></i>
                  <input class="amendment" v-model="scope.row.brightness" />
                  <i class="el-icon-arrow-right" @click="addld(scope.row)"> </i>
                </span>
                <!-- 色温 -->
                <span
                  v-if="scope.row.properties.find((el) => el.cmd_name == 'cct')"
                  >色温:
                  <i class="el-icon-arrow-left" @click="delsw(scope.row)"></i>
                  <input
                    :max="5000"
                    :min="2700"
                    class="amendment"
                    v-model="scope.row.cct"
                  />
                  <i class="el-icon-arrow-right" @click="addsw(scope.row)"> </i>
                </span>
                <!-- 温度 -->
                <span
                  v-if="
                    scope.row.properties.find(
                      (el) => el.cmd_name == 'target_temperature'
                    )
                  "
                  >温度:
                  <i class="el-icon-arrow-left" @click="delwd(scope.row)"></i>
                  <input
                    :max="32"
                    :min="16"
                    :step="1"
                    class="amendment"
                    v-model="scope.row.target_temp"
                  />
                  <i class="el-icon-arrow-right" @click="addwd(scope.row)"> </i>
                </span>
                <!-- 开合度 -->
                <span
                  v-if="
                    scope.row.properties.find(
                      (el) => el.cmd_name == 'open_level'
                    )
                  "
                  >开合度:
                  <i class="el-icon-arrow-left" @click="delkhd(scope.row)"></i>
                  <input
                    :max="100"
                    :min="1"
                    class="amendment"
                    v-model="scope.row.open_level"
                  />
                  <i class="el-icon-arrow-right" @click="addkhd(scope.row)">
                  </i>
                </span>
                <!-- RGBW -->
                <el-popover placement="bottom" trigger="click">
                  <div class="rgbw">
                    <!-- R -->
                    <div>
                      R &nbsp;
                      <i
                        class="el-icon-arrow-left"
                        @click="delr(scope.row)"
                      ></i>
                      <input class="amendment" v-model="scope.row.red" />
                      <i class="el-icon-arrow-right" @click="addr(scope.row)">
                      </i>
                    </div>
                    <!-- G -->
                    <div>
                      G &nbsp;
                      <i
                        class="el-icon-arrow-left"
                        @click="delg(scope.row)"
                      ></i>
                      <input class="amendment" v-model="scope.row.green" />
                      <i class="el-icon-arrow-right" @click="addg(scope.row)">
                      </i>
                    </div>
                    <!-- B -->
                    <div>
                      B &nbsp;
                      <i
                        class="el-icon-arrow-left"
                        @click="delb(scope.row)"
                      ></i>
                      <input class="amendment" v-model="scope.row.blue" />
                      <i class="el-icon-arrow-right" @click="addb(scope.row)">
                      </i>
                    </div>
                    <!-- W -->
                    <div>
                      w&nbsp;
                      <i
                        class="el-icon-arrow-left"
                        @click="delw(scope.row)"
                      ></i>
                      <input class="amendment" v-model="scope.row.white" />
                      <i class="el-icon-arrow-right" @click="addw(scope.row)">
                      </i>
                    </div>
                    <!-- <div>
                      <el-button
                        style="margin-top: 20px"
                        type="primary"
                        @click="close"
                        >确 定1</el-button
                      >
                    </div> -->
                  </div>
                  <span
                    v-if="
                      scope.row.properties.find((el) => el.cmd_name == 'red')
                    "
                    slot="reference"
                  >
                    RGBW:( {{ scope.row.red }},{{ scope.row.green }},{{
                      scope.row.blue
                    }},{{ scope.row.white }} )
                  </span>
                </el-popover>
              </div>

              <div class="flex-center flex-end flex-wrap" v-else>
                <span
                  >(场景) 延时:
                  <i class="el-icon-arrow-left" @click="delys(scope.row)"></i>
                  <input
                    :max="100"
                    :min="0"
                    class="amendment"
                    v-model="scope.row.time_delay"
                  />
                  <i class="el-icon-arrow-right" @click="addys(scope.row)"> </i>
                </span>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            width="200"
            align="right"
            :header-cell-style="{ 'text-align': 'right' }"
          >
            <template slot="header">
              <el-button @click="delet()" :disabled="!buttonshow"
                >删除设备</el-button
              >
            </template>
            <template scope="scope">
              <div v-if="scope.row.properties">
                <!-- 场景的延时 -->
                <span
                  >延时:
                  <i class="el-icon-arrow-left" @click="delys(scope.row)"></i>
                  <input
                    :max="100"
                    :min="0"
                    class="amendment"
                    v-model="scope.row.time_delay"
                  />
                  <i class="el-icon-arrow-right" @click="addys(scope.row)"> </i>
                </span>
                <!-- 开关 -->
                <el-switch
                  v-if="
                    scope.row.properties.find((el) => el.cmd_name == 'switch')
                  "
                  @change="cc"
                  @click.native.stop="cc"
                  :active-value="1"
                  v-model="scope.row.on"
                  :inactive-value="0"
                  active-color="blue"
                  inactive-color="#CCCCCC"
                >
                </el-switch>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="delqx && buttonshow"
            type="selection"
            width="60"
          >
            <template slot="header"> </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 选择条件对话框   -->
    <div
      v-if="!as && dialogVisible"
      class="xztj"
      :center="false"
      title="选择条件"
      width="70%"
      :before-close="handleClose"
    >
      <el-table
        :height="tableHeight"
        style="width: 98%; margin-left: 1%"
        ref="tabs"
        @row-click="checkedClisktj"
        :header-cell-style="{
          'text-align': 'left',
          color: '#000',
          'border-color': '#ccffff',
          background: '#CCFFFF',
        }"
        border
        :cell-style="{ 'text-align': 'left', 'border-color': '#fff' }"
        :data="conditionList"
        @selection-change="handleSelectionChange"
        @select="handleSelect"
        class="noe"
      >
        <!-- @select-all="handleSelectAll" -->
        <el-table-column prop="dev_id">
          <template slot="header">
            <span style="margin-right: 0.5vw">MAC</span>
            <!-- 点击搜索框1 -->
            <el-popover placement="bottom" trigger="click">
              <MACinput />
              <i slot="reference" class="el-icon-caret-bottom"></i>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="dev_type_name">
          <template slot="header">
            <span style="margin-right: 0.5vw">设备类型</span>
            <!-- 点击搜索框2 -->
            <el-popover placement="bottom" trigger="click">
              <FacilityTypeinput />
              <i slot="reference" class="el-icon-caret-bottom"></i>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="name">
          <template slot="header">
            <span style="margin-right: 0.5vw">设备名称</span>
            <!-- 点击搜索框3 -->
            <el-popover placement="bottom" trigger="click">
              <FacilityNameinput />
              <i slot="reference" class="el-icon-caret-bottom"></i>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="area.name">
          <template slot="header">
            <span style="margin-right: 0.5vw">所在空间</span>
            <!-- 点击搜索框4 -->
            <el-popover placement="bottom" trigger="click">
              <LocationSpaceinput />
              <i slot="reference" class="el-icon-caret-bottom"></i>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column type="selection" width="80"> </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="SelectionCondition()"
          >确 定</el-button
        >
      </span>
    </div>

    <!-- 选择动作对话框-->
    <div
      v-if="!as && dialogVisible1"
      class="xzdz"
      :center="false"
      title="选择动作"
      :before-close="handleClose1"
    >
      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="场景选择" name="first">
            <el-table
              ref="table1"
              @row-click="checkedClisk1"
              border
              :height="tableHeight"
              :header-cell-style="{
                'text-align': 'left',
                color: '#000',
                'border-color': '#ccffff',
                background: '#CCFFFF',
              }"
              :cell-style="{
                'text-align': 'left',
                'border-color': '#ffffff00',
              }"
              @select="handleSelect1"
              :data="filteredData1"
              @selection-change="sceneSelectionChange"
              class="noe"
            >
              <el-table-column prop="scene_name">
                <template slot="header">
                  <span style="margin-right: 0.5vw">场景名称</span>
                  <!-- 点击搜索框6 -->
                  <el-popover placement="bottom" trigger="click">
                    <SceneNameinput
                      @filtergeneralname="filtergeneralnameTable1"
                    />
                    <i slot="reference" class="el-icon-caret-bottom"></i>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column>
                <template slot="header">
                  <span style="margin-right: 0.5vw">所在空间</span>
                  <!-- 点击搜索框4 -->
                  <el-popover placement="bottom" trigger="click">
                    <LocationSpaceinput />
                    <i slot="reference" class="el-icon-caret-bottom"></i>
                  </el-popover>
                </template>
                <template scope="scope">
                  <el-select
                    class="interspace"
                    disabled
                    style="width: 40%"
                    v-model="scope.row.scene_area_id"
                    filterable
                    placeholder="--"
                  >
                    <el-option
                      v-for="item in options1"
                      :key="item.area_id"
                      :label="item.name"
                      :value="item.area_id"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                type="selection"
                width="80"
                how-overflow-tooltip="true"
              >
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="群组选择" name="first1">
            <el-table
              ref="table2"
              @row-click="checkedClisk2"
              border
              :height="tableHeight"
              :header-cell-style="{
                'text-align': 'left',
                color: '#000',
                'border-color': '#ccffff',
                background: '#CCFFFF',
              }"
              :cell-style="{
                'text-align': 'left',
                'border-color': '#ffffff00',
              }"
              @select="handleSelect2"
              :data="groupList"
              @selection-change="handleSelectionChange"
              class="noe"
            >
              <el-table-column prop="group_name">
                <template slot="header">
                  <span style="margin-right: 0.5vw">群组名称</span>
                  <!-- 点击搜索框6 -->
                  <el-popover placement="bottom" trigger="click">
                    <SceneNameinput />
                    <i slot="reference" class="el-icon-caret-bottom"></i>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column>
                <template slot="header">
                  <span style="margin-right: 0.5vw">所在空间</span>
                  <!-- 点击搜索框4 -->
                  <el-popover placement="bottom" trigger="click">
                    <LocationSpaceinput />
                    <i slot="reference" class="el-icon-caret-bottom"></i>
                  </el-popover>
                </template>
                <template slot-scope="scope">
                  <el-select
                    class="interspace"
                    disabled
                    style="width: 100%"
                    v-model="scope.row.group_area_id"
                    filterable
                    placeholder="--"
                  >
                    <el-option
                      v-for="item in options1"
                      :key="item.area_id"
                      :label="item.name"
                      :value="item.area_id"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                type="selection"
                width="80"
                how-overflow-tooltip="true"
              >
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="设备选择" name="second">
            <el-table
              ref="table3"
              @cell-click="checkedClisk3"
              border
              :height="tableHeight"
              :header-cell-style="{
                'text-align': 'left',
                color: '#000',
                'border-color': '#ccffff',
                background: '#CCFFFF',
              }"
              :cell-style="{
                'text-align': 'left',
                'border-color': '#ffffff00',
              }"
              @select="handleSelect3"
              :data="filteredData4"
              @selection-change="actionsSelectionChange"
              class="noe"
            >
              <el-table-column prop="dev_id">
                <template slot="header">
                  <span style="margin-right: 0.5vw">MAC</span>
                  <!-- 点击搜索框1 -->
                  <el-popover placement="bottom" trigger="click">
                    <MACinput @filtermac="filtermacTable" />
                    <i slot="reference" class="el-icon-caret-bottom"></i>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column prop="dev_type_name">
                <template slot="header">
                  <span style="margin-right: 0.5vw">设备类型</span>
                  <!-- 点击搜索框2 -->
                  <el-popover placement="bottom" trigger="click">
                    <FacilityTypeinput @filter="filterTable" />
                    <i slot="reference" class="el-icon-caret-bottom"></i>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column prop="name">
                <template slot="header">
                  <span style="margin-right: 0.5vw">设备名称</span>
                  <!-- 点击搜索框3 -->
                  <el-popover placement="bottom" trigger="click">
                    <FacilityNameinput @filtername="filternameTable" />
                    <i slot="reference" class="el-icon-caret-bottom"></i>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column>
                <template slot="header">
                  <span style="margin-right: 0.5vw">所在空间</span>
                  <!-- 点击搜索框4 -->
                  <el-popover placement="bottom" trigger="click">
                    <LocationSpaceinput @filterspace="filterspaceTable" />
                    <i slot="reference" class="el-icon-caret-bottom"></i>
                  </el-popover>
                </template>
                <template slot-scope="scope">
                  <span v-show="show">{{ scope.row.area.name || "--" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                type="selection"
                width="80"
                how-overflow-tooltip="true"
              >
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </template>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="actionPopSubmitPopupData()"
          >确 定2</el-button
        >
      </span>
    </div>
  </div>
</template>
<script>
import Api from "@/api/api";
import MACinput from "@/components/cominput/MACinput.vue";
import LocationSpaceinput from "@/components/cominput/LocationSpaceinput.vue";
import FacilityNameinput from "@/components/cominput/FacilityNameinput.vue";
import FacilityTypeinput from "@/components/cominput/FacilityTypeinput.vue";
import SceneNameinput from "@/components/cominput/SceneNameinput.vue";

export default {
  inject: ["reload"],
  components: {
    MACinput,
    LocationSpaceinput,
    FacilityNameinput,
    FacilityTypeinput,
    SceneNameinput,
  },

  data() {
    return {
      currentSelect: {},
      as: true,
      activeName: "second",
      dialogVisible: false,
      buttonshow: true,
      Nameshow: true,
      dialogVisible1: false,
      show: true,
      delqx: false,
      iconkaiguan: true,
      // localSid: localStorage.getItem("sid"),
      localSid: "577688740d9d258b92c61e6b1f5498ff",
      tableHeight: window.innerHeight - 200,
      state: "",
      options: [
        {
          value: 1,
          label: "满足所有条件时",
        },
        {
          value: 2,
          label: "满足任一条件时",
        },
      ],
      value: "",
      equipmentList1: [],
      actionSelection: [],
      sceneSelection: [],
      conditionSelection: [],
      filteredData: [],
      maxSelections: 5,
      maxSelections1: 2,
      maxSelections2: 2,
      maxSelections3: 5,
      selectedItems: [],
      sceneList: [],
      filteredData1: [],
      groupList: [],
      conditionOptions: {
        triggersOptionsList: [],
        characterOptionsList: [],
        conditionsOptionsList: [],
      },
      mainConditionOptions: [
        {
          value: 1,
          label: "是",
        },
        {
          value: 0,
          label: "否",
        },
      ],

      filteredData2: [],
      conditionList: [],
      filteredData3: [],
      list: [],
      filteredData4: [],
      // 选中数组
      ids: [1, 123],
    };
  },
  async created() {
    let res1 = await Api.query_areas({ params: { sid: this.localSid } });
    this.options1 = res1.result.areas;
    let res = await Api.query_automation_list({
      params: { sid: this.localSid },
    });
    console.log(res);
    this.equipmentList1 = res.result.automations;
    this.filteredData = JSON.parse(JSON.stringify(this.equipmentList1));

    let res2 = await Api.query_all_scene_detail_ex2({
      params: {
        sid: this.localSid,
      },
    });
    this.sceneList = res2.result.scene_list;
    this.filteredData1 = JSON.parse(JSON.stringify(this.sceneList));
    console.log("场景选择的数据源>", this.filteredData1);

    let res3 = await Api.exc({
      params: { sid: this.localSid },
    });
    this.list = res3.result.device_ep_list;
    this.filteredData4 = JSON.parse(JSON.stringify(this.list));
    this.filteredData4.forEach((x) => {
      x.ep = x.ep_id;
    });

    let res4 = await Api.query_all_group_detail({
      params: { sid: this.localSid },
    });
    this.groupList = res4.result.group_list; //数据源一
    console.log("群组选择的数据源>", this.groupList);

    let res6 = await Api.query_all_automation_condition_device_ep_detail({
      params: { sid: this.localSid },
    });
    this.conditionList = res6.result.device_ep_list;
    this.conditionList.forEach((x, idx, arr) => {
      if (x.condition_types.length == 0) {
        arr.splice(idx, 1);
      }
    });
  },
  mounted() {},
  methods: {
    filtergeneralnameTable(keywords) {
      if (keywords.trim() === "") {
        this.filteredData = JSON.parse(JSON.stringify(this.equipmentList1));
      } else {
        this.filteredData = this.equipmentList1.filter((row) => {
          return row.name.includes(keywords);
        });
      }
    },
    filtermacTable(keywords) {
      if (keywords.trim() === "") {
        this.filteredData4 = JSON.parse(JSON.stringify(this.list));
      } else {
        this.filteredData4 = this.list.filter((row) => {
          return row.dev_id.includes(keywords);
        });
      }
    },
    filterTable(keywords) {
      if (keywords.trim() === "") {
        this.filteredData4 = JSON.parse(JSON.stringify(this.list));
      } else {
        this.filteredData4 = this.list.filter((row) => {
          return row.dev_type_name.includes(keywords);
        });
      }
    },
    filternameTable(keywords) {
      if (keywords.trim() === "") {
        this.filteredData4 = JSON.parse(JSON.stringify(this.list));
      } else {
        this.filteredData4 = this.list.filter((row) => {
          return row.name.includes(keywords);
        });
      }
    },
    filterspaceTable(keywords) {
      if (keywords.trim() === "") {
        this.filteredData4 = JSON.parse(JSON.stringify(this.list));
      } else {
        this.filteredData4 = this.list.filter((row) => {
          return row.area.name.includes(keywords);
        });
      }
    },
    filtergeneralnameTable1(keywords) {
      if (keywords.trim() === "") {
        this.filteredData1 = JSON.parse(JSON.stringify(this.sceneList));
      } else {
        this.filteredData1 = this.sceneList.filter((row) => {
          return row.scene_name.includes(keywords);
        });
      }
    },
    // 阻止冒泡事件（忽略）
    cc() {},
    async changeActive(row) {
      // console.log(row);
      await Api.update_automation({
        params: {
          sid: this.localSid,
          type: row.type,
          automation_id: row.automation_id,
          active: row.active,
        },
      });
      this.$message({
        type: "success",
        message: "修改成功",
      });
    },
    // 保存设备
    async editPopeSubmitPopupData() {
      const loading = this.$loading({
        lock: true,
        text: "加载中,请稍等片刻. . .",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.currentSelectCopy = JSON.parse(JSON.stringify(this.currentSelect));
      this.currentSelectCopy.actions.forEach((x) => {
        x.time_delay = x.time_delay * 10;
        if (x.target_temp) {
          x.target_temp = x.target_temp * 10;
        }
      });
      this.currentSelectCopy.conditions.forEach((x) => {
        if (x.ep_id !== undefined) {
          x.ep = x.ep_id;
        }
      });
      await Api.strict_save_automations_detail({
        params: {
          sid: this.localSid,
          automation_list: [this.currentSelectCopy],
        },
      });
      this.editPopVisible = false;
      loading.close();
      this.reload();
    },
    // 列表内的删除
    del(idVal) {
      // console.log(idVal)
      this.del_automation_id = idVal;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          Api.delete_automations({
            params: { sid: this.localSid, automation_id_list: [idVal] },
          });
          this.reload();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 删除设备
    async delet() {
      this.delqx = !this.delqx;
      console.log("delet");
      // const loading = this.$loading({
      //   lock: true,
      //   text: "加载中,请稍等片刻",
      //   spinner: "el-icon-loading",
      //   background: "rgba(0, 0, 0, 0.7)",
      // });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //修改名称
    async datename() {
      console.log(this.currentSelect);
      await Api.update_automation({
        params: {
          sid: this.localSid,
          type: this.currentSelect.type,
          automation_id: this.currentSelect.automation_id,
          name: this.currentSelect.name,
        },
      });
      this.Nameshow = !this.Nameshow;
      this.$message({
        showClose: true,
        type: "success",
        message: "修改成功",
      });
    },
    checkedClisktj(row) {
      console.log(3, row);
    },
    // 亮度递增
    addld(row) {
      if (row.szc.brightness < 255) {
        row.szc.brightness++;
      } else {
        this.$message({
          message: "不能超出取值范围的最大值",
          type: "warning",
        });
      }
    },
    // 亮度递减
    delld(row) {
      if (0 < row.brightness) {
        row.brightness--;
      } else {
        this.$message({
          message: "不能超出取值范围的最小值",
          type: "warning",
        });
      }
    },
    //色温递增
    addsw(row) {
      if (row.cct < 5000) {
        row.cct++;
      } else {
        this.$message({
          message: "不能超出取值范围的最大值",
          type: "warning",
        });
      }
    },
    //色温递减
    delsw(row) {
      if (2700 < row.cct) {
        row.cct--;
      } else {
        this.$message({
          message: "不能超出取值范围的最小值",
          type: "warning",
        });
      }
    },
    //温度递增
    addwd(row) {
      if (row.target_temp < 32) {
        row.target_temp++;
      } else {
        this.$message({
          message: "不能超出取值范围的最大值",
          type: "warning",
        });
      }
    },
    //温度递减
    delwd(row) {
      if (16 < row.target_temp) {
        row.target_temp--;
      } else {
        this.$message({
          message: "不能超出取值范围的最小值",
          type: "warning",
        });
      }
    },
    //开合度递增
    addkhd(row) {
      if (row.open_level < 100) {
        row.open_level++;
      } else {
        this.$message({
          message: "不能超出取值范围的最大值",
          type: "warning",
        });
      }
    },
    //开合度递减
    delkhd(row) {
      if (1 < row.open_level) {
        row.open_level--;
      } else {
        this.$message({
          message: "不能超出取值范围的最小值",
          type: "warning",
        });
      }
    },
    //R递增
    addr(row) {
      if (row.red < 255) {
        row.red++;
      } else {
        this.$message({
          message: "不能超出取值范围的最大值",
          type: "warning",
        });
      }
    },
    //R递减
    delr(row) {
      if (0 < row.red) {
        row.red--;
      } else {
        this.$message({
          message: "不能超出取值范围的最小值",
          type: "warning",
        });
      }
    },
    //G递增
    addg(row) {
      if (row.green < 255) {
        row.green++;
      } else {
        this.$message({
          message: "不能超出取值范围的最大值",
          type: "warning",
        });
      }
    },
    //G递减
    delg(row) {
      if (0 < row.green) {
        row.green--;
      } else {
        this.$message({
          message: "不能超出取值范围的最小值",
          type: "warning",
        });
      }
    },
    //B递增
    addb(row) {
      if (row.blue < 2500) {
        row.blue++;
      } else {
        this.$message({
          message: "不能超出取值范围的最大值",
          type: "warning",
        });
      }
    },
    //B递减
    delb(row) {
      if (0 < row.blue) {
        row.blue--;
      } else {
        this.$message({
          message: "不能超出取值范围的最小值",
          type: "warning",
        });
      }
    },
    //W递增
    addw(row) {
      if (row.white < 2500) {
        row.white++;
      } else {
        this.$message({
          message: "不能超出取值范围的最大值",
          type: "warning",
        });
      }
    },
    //W递减
    delw(row) {
      if (0 < row.white) {
        row.white--;
      } else {
        this.$message({
          message: "不能超出取值范围的最小值",
          type: "warning",
        });
      }
    },
    // 选择条件
    sbcondition() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        for (let i = 0; i < this.conditionList.length; i++) {
          let dev_id = this.conditionList[i].dev_id;
          let ep_id = this.conditionList[i].ep_id;
          this.currentSelect.conditions.forEach((el) => {
            if (dev_id == el.dev_id && ep_id == el.ep) {
              this.$refs.tabs.toggleRowSelection(this.conditionList[i], true);
            }
          });
        }
      });
    },
    // 选择动作
    SelectiveAction() {
      this.dialogVisible1 = true;
      this.$nextTick(() => {
        for (let i = 0; i < this.currentSelect.actions.length; i++) {
          let dev_id = this.currentSelect.actions[i].area.gw_id;
          // let ep = this.currentSelect.actions[i].ep;
          console.log("dev_id>>>>", dev_id);
          // console.log("ep>>>>", ep);

          // this.filteredData4.forEach((el) => {
          //   if (dev_id == el.dev_id && ep == el.ep) {
          //     this.$refs.table3.toggleRowSelection(
          //       this.currentSelect.actions[i],
          //       true
          //     );
          //   }
          // });
          console.log("外部的数据>", this.currentSelect.actions);
          console.log("场景>", this.filteredData1);
          this.filteredData1.forEach((el) => {
            // console.log("郑吊毛>dev_id", dev_id);
            // console.log("郑吊毛>ep_id", ep);
            if (dev_id == el.gw_id) {
              this.$refs.table1.toggleRowSelection(
                this.currentSelect.actions[i],
                true
              );
            }
          });
        }
      });
    },
    /* 关闭rgbw确定按钮 */
    close() {
      document.body.click();
    },

    // 场景选择点列表选中复选框
    checkedClisk1(row) {
      console.log(row);
    },
    checkedClisk2(row) {
      console.log(row);
    },
    checkedClisk3(row) {
      console.log(row);
    },
    // 设备选择的复选框选中数据
    actionsSelectionChange(val) {
      this.actionSelection = val;
    },
    // 场景选择的复选框选中数据
    sceneSelectionChange(val) {
      this.sceneSelection = val;
    },
    // 首页的创建
    async addSelect() {
      await Api.add_automation({
        params: { sid: this.localSid, name: "默认名称" },
      });
      this.$message({
        showClose: true,
        type: "success",
        message: "创建成功",
      });
      this.reload();
      // this.createAutoPopVisible = false;
    },
    // addSelect() {
    //   // this.duplication();
    //   this.$message({
    //     showClose: true,
    //     type: "success",
    //     message: "创建成功",
    //   });
    // },
    // 列表内的编辑
    async redact(row) {
      console.log("编辑带参", row);
      let res = await Api.query_automation_detail({
        params: {
          sid: this.localSid,
          automation_id: row.automation_id,
        },
      });
      this.conditionOptions.conditionsOptionsList = [];
      this.conditionOptions.triggersOptionsList = [];
      this.conditionOptions.characterOptionsList = [];
      this.currentSelect = res.result.automation_list[0];
      for (let i = 0; i < this.currentSelect.conditions.length; i++) {
        this.conditionOptions.triggersOptionsList.push(
          this.currentSelect.conditions[i].condition_types
        );
        this.currentSelect.conditions[i].condition_types.forEach((x) => {
          this.conditionOptions.conditionsOptionsList.push(x.condition_values);
          this.conditionOptions.characterOptionsList.push(x.characters);
        });
      }
      this.currentSelect.actions.forEach((x) => {
        x.time_delay = x.time_delay / 10;
        if (x.target_temp) {
          x.target_temp = x.target_temp / 10;
        }
      });
      console.log("条件数据", this.currentSelect.conditions);
    },
    async changeIsCondition() {
      await Api.update_automation({
        params: {
          sid: this.localSid,
          type: this.currentSelect.type,
          automation_id: this.currentSelect.automation_id,
          condition: this.currentSelect.condition,
        },
      });
      this.$message({
        type: "success",
        message: "修改成功",
      });
    },
    // 列表内的复制
    async duplication(idVal) {
      console.log(idVal);
      const loading = this.$loading({
        lock: true,
        text: "加载中,请稍等片刻",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let res = await Api.add_automation({
        params: { sid: this.localSid, name: idVal.name },
      });
      let src_automation_id = res.result.scenes[0].automation_id;
      await Api.copy_automation_detail({
        params: {
          sid: this.localSid,
          dst_automation_id: src_automation_id,
          src_automation_id: idVal.automation_id,
        },
      });
      // this.copyAutoPopVisible = false;
      loading.close();
      this.reload();
      this.$message({
        showClose: true,
        type: "success",
        message: "复制成功",
      });
    },
    // 选择条件的取消
    handleClose() {
      this.dialogVisible = !this.dialogVisible;
    },
    // 选择动作的取消
    handleClose1() {
      this.dialogVisible1 = !this.dialogVisible1;
    },
    // 选择条件的确定
    SelectionCondition() {
      console.log("点击了选择条件");
      this.conditionOptions.conditionsOptionsList = [];
      this.conditionOptions.triggersOptionsList = [];
      this.conditionOptions.characterOptionsList = [];
      let conditionSelectionCopy = JSON.parse(
        JSON.stringify(this.conditionSelection)
      );
      conditionSelectionCopy.forEach((x) => {
        x.type = 0;
      });
      conditionSelectionCopy.forEach((x) => {
        console.log(x);
        this.conditionOptions.triggersOptionsList.push(x.condition_types);
        x.state_type = x.condition_types[0].state_type;
        x.character = x.condition_types[0].characters[0].value;
        x.alarm = x.condition_types[0].condition_values[0].value;
        x.main_condition = 1;
        x.condition_types.forEach((y) => {
          this.conditionOptions.conditionsOptionsList.push(y.condition_values);
          this.conditionOptions.characterOptionsList.push(y.characters);
        });
      });
      this.currentSelect.conditions = conditionSelectionCopy;

      this.dialogVisible = false;
      this.$message({
        showClose: true,
        type: "success",
        message: "选择成功",
      });
    },

    // 选择动作的确定
    async actionPopSubmitPopupData() {
      let actionSelectionCopy = JSON.parse(
        JSON.stringify(this.actionSelection)
      );
      let sceneSelectionCopy = JSON.parse(JSON.stringify(this.sceneSelection));
      this.currentSelect.actions.forEach((x) => {
        let index = actionSelectionCopy.findIndex((y) => {
          return x.dev_id == y.dev_id && x.ep == y.ep;
        });
        if (index !== -1) {
          this.actionSelection[index] = x;
        }
      });
      this.currentSelect.actions.forEach((x) => {
        let index = sceneSelectionCopy.findIndex((y) => {
          return x.scene_id == y.scene_id;
        });
        if (index !== -1) {
          this.sceneSelection[index] = x;
        }
      });
      actionSelectionCopy.forEach((x) => {
        x.time_delay = 0;
        x.dst_addr_mode = 0;

        if (
          x.properties.findIndex((el) => {
            return el.cmd_name == "switch";
          }) !== -1
        ) {
          x.on = 1;
        }
        if (
          x.properties.findIndex((el) => {
            return el.cmd_name == "brightness";
          }) !== -1
        ) {
          x.brightness = 127;
        }
        if (
          x.properties.findIndex((el) => {
            return el.cmd_name == "target_temperature";
          }) !== -1
        ) {
          x.target_temp = 26;
        }
        if (
          x.properties.findIndex((el) => {
            return el.cmd_name == "open_level";
          }) !== -1
        ) {
          x.open_level = 50;
        }
        if (
          x.properties.findIndex((el) => {
            return el.cmd_name == "cct";
          }) !== -1
        ) {
          x.cct = 3500;
        }
        if (
          x.properties.findIndex((el) => {
            return el.cmd_name == "white";
          }) !== -1
        ) {
          x.white = 127;
        }
        if (
          x.properties.findIndex((el) => {
            return el.cmd_name == "blue";
          }) !== -1
        ) {
          x.blue = 127;
        }
        if (
          x.properties.findIndex((el) => {
            return el.cmd_name == "green";
          }) !== -1
        ) {
          x.green = 127;
        }
        if (
          x.properties.findIndex((el) => {
            return el.cmd_name == "red";
          }) !== -1
        ) {
          x.red = 127;
        }
        if (
          x.properties.findIndex((el) => {
            return el.cmd_name == "wind_speed";
          }) !== -1
        ) {
          x.wind_speed = 1;
        }
        if (
          x.properties.findIndex((el) => {
            return el.cmd_name == "air_mode";
          }) !== -1
        ) {
          x.air_mode = 1;
        }
      });
      sceneSelectionCopy.forEach((x) => {
        x.time_delay = 0;
        x.on = 1;
        x.dst_addr_mode = 2;
      });
      this.currentSelect.actions = [
        ...actionSelectionCopy,
        ...sceneSelectionCopy,
      ];
      console.log("选择动作的数据", actionSelectionCopy);

      this.dialogVisible1 = false;
      this.$message({
        showClose: true,
        type: "success",
        message: "选择成功",
      });
    },

    // 多选框选中数据
    handleSelectionChange(row) {
      console.log("奤哈哈哈1", row);
      this.conditionSelection = row;
    },
    // 限制选择条件的复选框可选中数量为5
    handleSelect(selection, row) {
      if (selection.length > this.maxSelections) {
        this.selectedItems.pop();
        this.$refs.tabs.toggleRowSelection(row, false);
        this.$message({
          type: "error",
          message: "触发条件最多添至5组设备",
        });
      } else {
        this.selectedItems = selection;
      }
    },

    // 限制场景选择的复选框可选中数量为2
    handleSelect1(selection, row) {
      if (selection.length > this.maxSelections1) {
        this.selectedItems.pop();
        this.$refs.table1.toggleRowSelection(row, false);
        this.$message({
          type: "error",
          message: "场景最多选择两条",
        });
      } else {
        this.selectedItems = selection;
      }
    },

    // 限制场景选择的复选框可选中数量为2
    handleSelect2(selection, row) {
      if (selection.length > this.maxSelections2) {
        this.selectedItems.pop();
        this.$refs.table2.toggleRowSelection(row, false);
        this.$message({
          type: "error",
          message: "群组最多选择两条",
        });
      } else {
        this.selectedItems = selection;
      }
    },
    // 限制设备选择的复选框可选中数量为5
    handleSelect3(selection, row) {
      if (selection.length > this.maxSelections3) {
        this.selectedItems.pop();
        this.$refs.table3.toggleRowSelection(row, false);
        this.$message({
          type: "error",
          message: "设备最多选择5组",
        });
      } else {
        this.selectedItems = selection;
      }
    },

    // 点击行
    tz(row, column, event) {
      this.redact(row);
      console.log(row, column, event);
      this.as = false;
      // this.$router.push('/AutomateConfig')
    },
    fh() {
      this.as = true; //返回上一层
    },
  },
};
</script>
<style lang="scss" scoped>
html,
body {
  margin: 0;
  height: 100%;
  font-family: Arial, sans-serif;
  font-size: 10px;
}
.xzdz {
  width: 98%;
  height: calc(100vh - 80px);
  margin: 0 10px;

  .noe {
    // 列表的下拉样式
    .interspace {
      ::v-deep .el-input.is-disabled .el-input__icon {
        display: none;
      }
      ::v-deep .el-input.is-disabled .el-input__inner {
        width: 70px;
        padding: 0 0 0 0;
        color: #666060;
        border: #ffffff00;
        cursor: default;
        background: #ffffff00;
      }
    }
  }
}

.addanddel:hover {
  cursor: pointer;
}

.zhu {
  width: 100%;
  height: calc(100vh - 80px);
  display: flex;
  user-select: none; //解决页面多次点击出现的选中问题
  position: relative;

  ::v-deep .is-active {
    text-align: center;
    background: none !important;
  }
  .amendment {
    width: 33px;
    text-align: center;
    outline: none;
    border: 1px solid #ffffff;
    padding-right: 0px !important;
  }

  .box-card {
    box-sizing: border-box;
    margin-left: 25px;
    width: 98%;
    height: calc(100vh - 80px);
    .hzding {
      width: 100%;
      height: 5%;
      justify-content: space-between;
      border-bottom: 2px solid slategray;
    }
    .tiaojian {
      margin-top: 1.5vh;
      width: 100%;
      height: 36%;
      border-bottom: 2px solid slategray;
    }

    .tj {
      padding-bottom: 1vw;
      border-bottom: 2px solid rgba(230, 217, 217, 0.863);
      margin-top: 1.7vw;
    }
    .dongzuo {
      width: 100%;
      height: 7%;
      position: relative;
    }
    .tb {
      .bgyou {
        span {
          margin-left: 0.5vw;
        }
      }
      ::v-deep .has-gutter .el-checkbox__input {
        display: none;
      }

      ::v-deep
        .el-table__header
        .el-table-column--selection
        .cell
        .el-checkbox:after {
        color: #606266;
        font-size: 12px;
        margin-left: 2px;
        font-weight: bold;
      }
    }
  }
  // 去除滚动条
  ::v-deep .el-table th.gutter {
    display: none;
    width: 0;
  }
  ::v-deep .el-table colgroup col[name="gutter"] {
    display: none;
    width: 0;
  }
  ::v-deep .el-table__body {
    width: 100% !important;
  }
  ::-webkit-scrollbar {
    display: none;
  }
  //对话框头部做的分割线
  ::v-deep .el-dialog .el-dialog__header {
    height: 3vh;
    border-bottom: 2px solid rgb(219, 217, 215);
  }
  //对话框的头部左浮动
  ::v-deep .el-dialog__header .el-dialog__title {
    float: left;
  }
  //所有下拉框的背景颜色
  ::v-deep .el-input__inner {
    color: #000;
    background-color: rgb(249, 249, 249);
  }

  .tjyou > div:nth-child(n + 3) {
    ::v-deep .el-select {
      width: 100%;
    }
    ::v-deep .el-input__inner::placeholder {
      color: black;
    }
    ::v-deep .el-input__inner {
      color: black;
    }
  }
}

.dialog-footer {
  position: fixed;
  right: 3%;
  bottom: 2%;
}
.tbs {
  .bgyou {
    span {
      margin-left: 0.5vw;
      color: blue;
    }
  }
}
.rgbw {
  user-select: none;
  text-align: center;
  input {
    text-align: center;
    margin-top: 10px;
    width: 70px;
    font-size: 20px;
    outline: none;
    border: none;
  }
}
</style>
